<template>
    <div id="box">
        <h1>Todos</h1>
        <div class="warp">
            <input type="text" v-model="inputValue" @keyup.enter="add">
            <!-- 未完成列表 -->
            <ul v-show="num==1">
                <li v-for="(value,index) in own" :key="index" class="self">
                    <span class="wind" @click="finish(index)">✔</span>
                    <p>{{ value }}</p>
                    <span class="del" @click="delList(index)">✘</span>
                </li>
            </ul>
            <ul v-show="num==2">
                <li v-for="(value,index) in actives" :key="index" class="actives">
                    <span class="wind" @click="finish(index)">✔</span>
                    <p>{{ value }}</p>
                    <span class="del" @click="delList(index)">✘</span>
                </li>
            </ul>
            <!-- 完成列表 -->
            <ul v-show="num==3">
                <li v-for="(value,index) in windAll" :key="index" class="windAll fh">
                    <span class="wind">✔</span>
                    <p>{{ value }}</p>
                    <span class="del" @click="delList(index)">✘</span>
                </li>
            </ul>
            <!-- 控制台 -->
            <ul>
                <li>
                    <span>{{actives.length}}计划</span>
                    <div>
                        <span @click="num=1">全部</span>
                        <span @click="num=2">未完成</span>
                        <span @click="num=3">已完成</span>
                    </div>
                    <span>删除已完成{{ windAll.length}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>


export default {
    data() {
        return {
            num:'1',
            inputValue: '',
            actives: [],
            windAll: [],
            own:[]
        }
    },
    methods: {
        add() {
            if(this.inputValue && this.inputValue.trim())
                this.actives.push(this.inputValue);
            this.own.push(this.inputValue)
            this.inputValue=''
        },
        finish(index) {
            this.windAll.push(this.actives[index]);
            this.actives.splice(index,1)
        },
        delList(index) {
            this.actives.splice(index,1)
        }
    }
}
</script>

<style scoped lang="scss">
#box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    h1{
        font-size: 70px;
        font-weight: 800;
        margin: 30px 0px;
        color: #ccc;
        text-shadow: 0px 1px 2px #000000;
    }
    .warp{
        width: 400px;
        height: auto;
        box-sizing: border-box;
        padding: 20px;
        border: 1px solid #000;
        input{
            width: 100%;
            height: 30px;
            outline: none;
        }
        ul{
            width: 100%;
            list-style: none;
            li{
                width: 100%;
                padding: 10px 0px;
                display: flex;
                justify-content: space-between;
                &:hover{
                    .del{
                        opacity: 1;
                        }
                    }
                p{
                    width: 80%;;
                }
                div{
                    span{
                        padding: 0px 5px;
                    }
                }
                .del{
                    opacity: 0;
                    transition: opacity 0.5s;
                    
                }
            }
            .fh{
                .wind{
                    color: aqua;
                }
                p{
                    color: #ccc;
                    text-decoration: line-through;
                }
            }
        }
    }
}
</style>